<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">考点名称</label>
              <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                      class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;"
         layuimini-content-href="/static/exam/page/exam/examinee.html" data-title="考生详情" >考生详情</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="start">添加考试</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="import">导入考生</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;"
         layuimini-content-href="/static/exam/page/exam/kaikao_exam_details.html" data-title="考试详情" >考试详情</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="audit">申请开考</a>
    </script>

    <script type="text/html" id="add-exam-temp">
      <div class="layui-form layuimini-form" style="padding: 10px 0">
        <div class="layui-form-item">
          <label class="layui-form-label">考点名称</label>
          <div class="layui-input-block">
            <div class="layui-form-label" style="width: 100%;text-align: left">淮南职业技术学院</div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">考试时间</label>
          <div class="layui-input-block">
            <div class="layui-form-label" style="width: 100%;text-align: left">2020-09-01</div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">开始时间</label>
          <div class="layui-input-inline">
            <input type="text" name="date" id="start-time" lay-verify="date" placeholder="hh-mm-ss" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">结束时间</label>
          <div class="layui-input-inline">
            <input type="text" name="date" id="end-time" lay-verify="date" placeholder="hh-mm-ss" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div style="padding-left: 20px;padding-right: 20px">
          <blockquote class="layui-elem-quote site-text">
            设置考场信息
          </blockquote>
        </div>
        <!--考场信息-->
        <div class="u-border-bottom u-p-b-10">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">考试场编号</label>
              <div class="layui-input-inline" style="width: 120px">
                <select name="city" lay-verify="">
                  <option value="">请选择编号</option>
                  <option value="010">1</option>
                  <option value="021">2</option>
                  <option value="0571">3</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label" style="width: 80px">监考老师一</label>
              <div class="layui-input-inline" style="width: 120px">
                <select name="city" lay-verify="">
                  <option value="">请选择老师</option>
                  <option value="010">1</option>
                  <option value="021">2</option>
                  <option value="0571">3</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label" style="width: 80px">监考老师二</label>
              <div class="layui-input-inline" style="width: 120px">
                <select name="city" lay-verify="">
                  <option value="">请选择老师</option>
                  <option value="010">1</option>
                  <option value="021">2</option>
                  <option value="0571">3</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <a class="layui-btn layui-btn-danger">删除</a>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-normal">添加考场</button>
            </div>
          </div>
        </div>


        <div class="u-p-t-10 text-center">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
        </div>
      </div>
    </script>

  </div>
</div>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中'
    },
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中'
    },
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中'
    },
    {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中'
    }, {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中'
    }, {
      'id': 10000,
      name: '淮南职业技术学院',
      type: '安管人员',
      date: '2021-10-08',
      state: '考试中'
    }
  ]
  layui.use(['form', 'table', 'miniPage', 'element', 'laydate'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      laydate = layui.laydate,
      miniPage = layui.miniPage

    table.render({
      elem: '#currentTableId',
      // url: 'api/table.json',
      data: tableData,

      defaultToolbar: ['filter', 'exports', 'print'],
      cols: [[
        {type: "checkbox", width: 50},
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '考点名称' },
        { field: 'date', title: '考试日期' },
        { field: 'date', title: '报名人数' },
        { field: 'state', title: '状态' },
        { title: '操作', minWidth: 400, toolbar: '#currentTableBar', align: 'center' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field)
      layer.alert(result, {
        title: '最终的搜索信息'
      })

      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          searchParams: result
        }
      }, 'data')

      return false
    })

    // 编辑
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data

      switch (obj.event) {
        case 'details':
          var content = miniPage.getHrefContent('page/exam/kaikao_details.html')
          var openWH = miniPage.getOpenWidthHeight()
          var index = layer.open({
            title: '详情',
            type: 1,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: [openWH[0] + 'px', 'auto'],
            content: content,
          })
          $(window).on('resize', function () {
            layer.full(index)
          })
          break
        case 'start':
          var index = layer.open({
            title: '添加考试',
            type: 1,
            shade: 0.2,
            shadeClose: true,
            area: ['850px', '600px'],
            content: $('#add-exam-temp').html(),
            success: function () {
              form.render()
              laydate.render({
                elem: '#start-time',
                type: 'time'
              });
              laydate.render({
                elem: '#end-time',
                type: 'time'
              });
            }
          })
          return false
          break
        case 'import':
          layer.alert('监听导入考生占位', {
            title: '导入考生'
          })
          break
        case 'audit':
          layer.alert('申请已提交，将会在两个工作日内进行审批', {
            title: '提示'
          })
          break
      }
    })

  })
</script>
